<template>
	<div class="container">
		<!-- 路径导航区域 -->
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>公司信息</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 搜索区域 -->
		<!-- <el-row>
			<el-form :inline="true">
				<el-form-item label="文章名称">
					<el-input v-model="queryInfo.name" clearable @clear="queryList" placeholder="请输
入公司名称"></el-input>
				</el-form-item>

				<el-form-item>
					<el-button type="primary" @click="queryList">搜索</el-button>
					<el-button type="primary" @click="toAddArticle">新增文章</el-button>
					<el-button type="danger" @click="toRemoveBatchById">批量删除</el-button>

				</el-form-item>
			</el-form>
		</el-row> -->
		<!-- 表格区域 -->
		<el-table :data="companyList" border style="width: 100%" @selection-change="handleSelectionChange">
			<!-- <el-table-column type="selection" width="55"></el-table-column> -->
			<el-table-column prop="id" label="ID"></el-table-column>
			<el-table-column prop="name" label="公司名称"></el-table-column>
			<el-table-column prop="address" label="文公司地址"></el-table-column>
			<el-table-column prop="telephone" label="公司电话"></el-table-column>
			<el-table-column prop="simplyIntroduce" label="简介"></el-table-column>
			<el-table-column prop="email" label="公司邮箱"></el-table-column>

			<el-table-column prop="twoPicture" label="二维码">
				<template slot-scope='scope'>
					<el-image style="width: 100px; height: 100px"
						:src="'http://localhost:8080/sfzt_ssm/yuLan?filename=' + scope.row.twoPicture"></el-image>
				</template>
			</el-table-column>

			<el-table-column prop="picture" label="公司图片">
				<template slot-scope='scope'>
					<el-image style="width: 100px; height: 100px"
						:src="'http://localhost:8080/sfzt_ssm/yuLan?filename=' + scope.row.picture"></el-image>
				</template>
			</el-table-column>

			<el-table-column label="操作">
				<template slot-scope='scope'>
					<el-link type="primary" @click="toEditArticle(scope.row)">编辑信息</el-link>
					<el-link type="primary" @click="deleteArticle(scope.row.id)">删除信息</el-link> </template>
			</el-table-column>
		</el-table>
		<!-- 分页区域 -->
		<!-- <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
			:current-page="queryInfo.pageNum" :page-sizes="[1, 5, 10, 20]" :page-size="queryInfo.pageSize"
			layout="total, sizes, prev, pager, next, jumper" :total="total">
		</el-pagination> -->


		<!-- 新增和修改的对话框 -->
		<el-dialog :title="title" :visible.sync="dialogFormVisible" @close="cancle">
			<el-form :model="company">
				<el-form-item label="公司名称" label-width="80px">
					<el-input placeholder="请输入公司名称" v-model="company.name"></el-input>
				</el-form-item>

				<el-form-item label="公司地址" label-width="80px">
					<el-input placeholder="请输入文章简介" v-model="company.address"></el-input>
				</el-form-item>

				<el-form-item label="公司电话" label-width="80px">
					<el-input placeholder="请输入文章简介" v-model="company.telephone"></el-input>
				</el-form-item>

				<el-form-item label="公司简介" label-width="80px">
					<el-input placeholder="请输入文章简介" v-model="company.simplyIntroduce"></el-input>
				</el-form-item>

				<el-form-item label="公司邮箱" label-width="80px">
					<el-input placeholder="请输入文章简介" v-model="company.email"></el-input>
				</el-form-item>

				<el-form-item label="二维码" label-width="80px">
					<el-upload action="http://localhost:8080/sfzt_ssm/upload" list-type="picture-card" :file-list="fileList"
						:on-success="handleSuccess" :limit="1" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
						<i class="el-icon-plus"></i>
					</el-upload>
					<el-dialog :visible.sync="dialogVisible">
						<img width="100%" :src="dialogImageUrl" alt="">
					</el-dialog>
				</el-form-item>



				<el-form-item label="公司图片" label-width="80px">
					<el-upload action="http://localhost:8080/sfzt_ssm/upload" list-type="picture-card" :file-list="fileList2"
						:on-success="handleSuccess2" :limit="1" :on-preview="handlePictureCardPreview2" :on-remove="handleRemove2">
						<i class="el-icon-plus"></i>
					</el-upload>
					<el-dialog :visible.sync="dialogVisible2">
						<img width="100%" :src="dialogImageUrl2" alt="">
					</el-dialog>
				</el-form-item>



			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="cancle">取 消</el-button>
				<el-button type="primary" @click="addArticle">确 定</el-button>
			</div>
		</el-dialog>


	</div>
</template>
<script>
export default {
	data() {
		return {
			removeBatch: [],  //批量删除存储的数据
			removeBatchId: [],//批量删除存储的id值
			// 查询信息对象
			queryInfo: {
				articleName: '',
				pageNum: 1,
				pageSize: 10
			},
			total: 183,
			companyList: [],
			title: '', // 对话框标题
			dialogFormVisible: false, // 是否显示对话框
			company: { // 文章对象
				"id": 0,
				"name": "",
				"address": "",
				"telephone": "",
				"simplyIntroduce": "",
				"email": null,
				"twoPicture": null,
				"picture": null
			},
			dialogImageUrl: '', // 预览图片路径
			dialogVisible: false, // 预览图片的对话框
			fileList: [],      // 点击修改时，图片的预览效果


			dialogImageUrl2: '', // 预览图片路径
			dialogVisible2: false, // 预览图片的对话框
			fileList2: [],      // 点击修改时，图片的预览效果

		}
	},
	mounted() {
		this.queryList();
	},
	methods: {
		//批量删除文章
		// 表格中的多选框，改变时触发的函数
		handleSelectionChange(val) {
			this.removeBatch = val;
			// console.log("111@"+this.removeBatch.length)
		},
		toRemoveBatchById() {
			for (let it of this.removeBatch) {
				this.removeBatchId.push(it.id)
			}
			// console.log("222@"+this.removeBatchId.length)

			this.$confirm('确定要批量删除这些文章吗？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					//链接后端接口，根据id数组批量删除文章
					this.$http.delete('company/removeBatch?ids=' + this.removeBatchId)
						.then((resp) => {
							if (resp.data.status == 200) {
								this.$message.success("删除成功!")
								// 删除完重新查询
								this.queryList()
							} else {
								this.$message.error('接口异常！')
							}
						})

				})

				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					})
				})

		},

		// 删除文章
		deleteArticle(id) {
			this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					this.$http.delete('company/remove/' + id)
						.then(resp => {
							if (resp.data.status == 200) {
								this.$message.success(resp.message)
								this.queryList()
							} else {
								this.$message.error(resp.message)
							}
						})
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					})
				})
		},


		// 处理上传成功的函数
		handleSuccess(response) {
			console.log(response)
			// 把上传后的图片路径，交给文章对象的tabularChart
			this.company.twoPicture = response.data;
		},
		// 删除图片的事件
		handleRemove(file, fileList) {
			console.log(file, fileList);
			// 移除数据
			this.company.twoPicture = '';
		},

		// 预览图片事件
		handlePictureCardPreview(file) {
			this.dialogImageUrl = file.url;
			this.dialogVisible = true;
		},

		//    2222222222222222222
		// 处理上传成功的函数
		handleSuccess2(response) {
			console.log(response)
			// 把上传后的图片路径，交给文章对象的tabularChart
			this.company.picture = response.data;
		},
		// 删除图片的事件
		handleRemove2(file2, fileList2) {
			console.log(file2, fileList2);
			// 移除数据
			this.company.picture = '';
		},

		// 预览图片事件
		handlePictureCardPreview2(file2) {
			this.dialogImageUrl2 = file2.url2;
			this.dialogVisible2 = true;
		},




		// 取消对话框
		cancle() {
			this.dialogFormVisible = false;
			this.company = { // 文章对象
				"name": "",
				"address": "",
				"telephone": "",
				"simplyIntroduce": "",
				"email": null,
				"twoPicture": null,
				"picture": null
			}
			this.fileList = []
			this.fileList2 = []
		},
		// 进入修改的预览数据页面
		toEditArticle(row) {
			//console.log(row)
			// 赋值
			this.company = row;
			// 设置标题
			this.title = "修改公司信息";
			// 开启对话框
			this.dialogFormVisible = true;
			this.dialogFormVisible2 = true;
			// 动态的获取图片的名称并帮到到fileList
			this.fileList = [{
				name: row.twoPicture,
				url: 'http://localhost:8080/sfzt_ssm/yuLan?filename=' + row.twoPicture
			}];

			this.fileList2 = [{
				name: row.twoPicture,
				url: 'http://localhost:8080/sfzt_ssm/yuLan?filename=' + row.picture
			}];
		},
		// 添加文章
		addArticle() {
			if (this.company.id) { // 有值为true  修改
				this.$http.put("company/edit", this.company)
					.then(resp => {
						if (resp.data.status == 200) {
							// 消息提示
							this.$message.success('修改成功！');
							// 清空数据
							this.company = { // 文章对象
								"name": "",
								"address": "",
								"telephone": "",
								"simplyIntroduce": "",
								"email": null,
								"twoPicture": null,
								"picture": null
							}
							// 关闭对话框
							this.dialogFormVisible = false;
							// 重新查询
							this.queryList()
							this.fileList = []
							this.fileList2 = []

						} else {
							this.$message.error('接口异常！')
						}
					})

			} else {
				this.$http.post("company/add", this.company)
					.then(resp => {
						if (resp.data.status == 200) {
							// 消息提示
							this.$message.success('添加成功！');
							// 清空数据
							this.company = { // 文章对象
								"name": "",
								"address": "",
								"telephone": "",
								"simplyIntroduce": "",
								"email": null,
								"twoPicture": null,
								"picture": null
							}
							// 关闭对话框
							this.dialogFormVisible = false;
							// 重新查询
							this.queryList()
							this.fileList = []
							this.fileList2 = []
						} else {
							this.$message.error('接口异常！')
						}
					})
			}
		},
		// 进入添加的对话框
		toAddArticle() {
			this.title = "新增文章";
			this.dialogFormVisible = true;
			// 把当前登录的用户的id赋值为文章的teacher_id
			//		this.article.teacherId = sessionStorage.getItem('userid');
		},
		// 分页查询信息的方法
		queryList() {
			// 调用后端接口来获取数据
			this.$http.get('company/find', {
				params: this.queryInfo
			})
				.then(resp => {
					if (resp.data.status == 200) {
						console.log(resp.data)
						this.companyList = resp.data.data.list;
						this.total = resp.data.data.total;
						console.log(this.companyList)
					} else {
						this.$message.error('查询失败！')
					}
				})
		},

		handleSizeChange(size) {
			//console.log('每页显示数量发生改变');
			this.queryInfo.pageSize = size;
			this.queryInfo.pageNum = 1;
			// 重新查询
			this.queryList()
		},
		handleCurrentChange(num) {
			//console.log('页码发生改变');
			this.queryInfo.pageNum = num;
			// 重新查询
			this.queryList();
		}
	}
}
</script>
<style>
.el-breadcrumb {
	margin-bottom: 15px;
	padding: 0 0 15px;
	border-bottom: 1px solid #ddd;
}

.el-pagination {
	margin-top: 15px;
}

.el-link {
	padding: 0 5px;
}

/**设置富文本编辑器的最小高度，注意style中不能使用scoped **/
.ql-container {
	min-height: 200px;
}
</style>